<template>
	<view class="">
		<view class="box">
			<view class="title">打开次数</view>
			<view class="input">
				<input placeholder="输入单位次数" v-model="number" type="number" />
			</view>
		</view>
		<view class="box">
			<view class="title">单次访问时长</view>
			<view class="input">
				<input placeholder="输入单位秒" v-model="time" type="digit" />
			</view>
		</view>
		<view class="box">
			<view class="title">访问人数</view>
			<view class="input">
				<input placeholder="输入单位人" v-model="peopleNum" type="number" />
			</view>
		</view>
		<view class="box">
			<view class="title">访问码</view>
			<radio-group class="flex mt-20">
				<label class="flex mr-20" v-for="(item, index) in items" :key="item.value" @click="chooseCode(index)">
					<radio color="#FF0000" :value="item.value" :checked="index === current" />
					<view>{{item.name}}</view>
				</label>
			</radio-group>
		</view>
		<view class="box" v-if="current == 0">
			<view class="title">访问码</view>
			<view class="input">
				<input placeholder="输入访问码" v-model="code" type="number" />
			</view>
		</view>
		<view class="box">
			<view class="title">有效期</view>
			<radio-group class="flex mt-20">
				<label class="flex mr-20" v-for="(item, index) in periodValidity" :key="item.value"
					@click="chooseDateType(index)">
					<radio color="#FF0000" :value="item.value" :checked="index === periodValidityCurrent" />
					<view>{{item.name}}</view>
				</label>
			</radio-group>
		</view>
		<view class="box" v-if="periodValidityCurrent == 1">
			<view class="title">指定日期</view>
			<view class="input flex flexSbetween">
				<view @click="chooseDate">{{date}}</view>
				<u-calendar color="#FE0000" :show="show" closeOnClickOverlay @close="close" mode="range"
					@confirm="confirm" showLunar monthNum="4"></u-calendar>
				<u-icon name="calendar" color="#999" size="28"></u-icon>
			</view>
		</view>
		<button class="confirmBtn margin-30" @click="submit">确定</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number: '',
				time: '',
				peopleNum: '',
				code: '',
				items: [{
						name: '有'
					},
					{
						name: '无'
					}
				],
				current: 1,
				periodValidity: [{
						name: '永久'
					},
					{
						name: '自定义'
					},
				],
				periodValidityCurrent: 0,
				date: '请选择日期',
				id: '',
				show: false,
				validityDate: []
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getInfo()
		},
		methods: {
			getInfo() {
				let data = {
					id: this.id,
				}
				this.api.get('api/file/setup', data).then(res => {
					if (res.code == 200) {
						this.number = res.data.open_num
						this.time = res.data.access_time
						this.peopleNum = res.data.access_num
						if (res.data.validity_date) {
							this.periodValidityCurrent = 1
							this.validityDate = res.data.validity_date.split(',')
							this.date = res.data.validity_date
						}
						this.code = res.data.access_code
						this.current = res.data.has_access == 0 ? 1 : 0
					}
				})
			},
			// 访问码
			chooseCode(e) {
				console.log(e)
				this.current = e
			},
			chooseDateType(e) {
				this.periodValidityCurrent = e
			},
			chooseDate() {
				this.show = true
			},
			close() {
				this.show = false
			},
			confirm(e) {
				this.show = false
				var arr = []
				arr.push(e[0])
				arr.push(e[e.length - 1])
				this.validityDate = arr
				console.log(this.validityDate)
				this.date = e[0] + '~' + e[e.length - 1]
			},
			submit() {
				let data = {
					id: this.id,
					openNum: this.number,
					accessTime: this.time,
					accessNum: this.peopleNum,
					hasAccess: this.current == 0 ? 1 : 0,
					accessCode: this.code,
					validityDate: this.validityDate.join(','),
				}
				this.api.post('api/file/setup', data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.box {
		margin: 40rpx;
	}

	.title {
		font-size: 30rpx;
		color: #333;
	}

	.input {
		border: 1rpx solid #616161;
		border-radius: 10rpx;
		padding: 20rpx 20rpx;
		margin-top: 20rpx;
	}

	radio {
		transform: scale(0.7);
	}

	.dateTime {
		color: #999;
		flex: 1;
	}

	.dateTimes {
		color: #333;
		flex: 1;
	}
</style>